<template>
	<view class="content">
		<view  class="banner">
			<image src="../../static/images/zhuanqubanner.png"></image>
		</view>
		<view class="title">
			<image src="../../static/images/title-left.png"></image>
			    专享福利
			<image src="../../static/images/title-right.png"></image>
		</view>
		<view class="juan-list">
			<image src="../../static/images/noshuju.png" class="no-data" v-if="noshuju"></image>
			<view class="juan-item uni-row" v-for="(item,index) in list" :key="index" >
				<view class="juaninfo" style="position: relative;">
					<image src="../../static/images/juan3.png" class="beijing"></image>
					<view style="position: absolute;top: 0px;left: 0px;width: 100%;">
						<view class="juan-text">
							<text>￥</text>
							<text>{{item.minus_money}}</text>
							<text>{{item.coupons_name}}</text>
						</view>
						<view class="juan-time">有效期{{item.valid_time}}</view>
					</view>
				</view>
				<view class="juanbtn" style="position: relative;" @tap="getquan" :data-index="index">
					<image src="../../static/images/juan1.png" class="beijing"></image>
					<view style="position: absolute;top: 0px;left: 0px;width: 100%;">
						<image src="../../static/images/lingqu.png" class="zi"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getlogin} from "@/static/js/login.js";
	import httpPath from '@/static/js/path.js';
	export default {
			data() {
				return {
					wxinfo_id:"",
                    list:[],
					userinfo:{},
					noshuju:false,
				}
			},
			onLoad(option) {
				this.userinfo = getlogin()
				this.wxinfo_id = this.userinfo.wxinfo_id;
                this.getdata();
			},
			methods: {
				/**
				 * 领取优惠券
				 */
				getquan(e){
					if(this.userinfo.role=="s"){
						uni.showModal({
							showCancel:false,
							content:"您是商家不能领劵"
						})
						return false;
					}
					let index = e.currentTarget.dataset.index;
					let data = this.list[index];
					data.wxinfo_id=this.wxinfo_id;
					console.log(data)
					uni.request({
						url: httpPath.filePath+'/index/coupons/getcoupon',
						method:'POST',
						header:{'content-type':'application/x-www-form-urlencoded'},
						data:data ,
						success: (res) => {
							if(res.data.code==200){
								uni.showModal({
									showCancel:false,
									content:res.data.msg
								})
								this.getdata()
							}else{
								uni.showModal({
									showCancel:false,
									content:res.data.msg
								})
							}  
						}
					});
				},
				/**
				 * 获取优惠券
				 */
				getdata(){
					uni.request({
						url: httpPath.filePath+'/index/coupons/index',
						method:'POST',
						header:{'content-type':'application/x-www-form-urlencoded'},
						data: {wxinfo_id:this.wxinfo_id},
						success: (res) => {
							if(res.data.code==200){
								this.list=res.data.data;
								if(this.list.length==0){
									this.noshuju = true;
								}else{
									this.noshuju = false;
								}
							}
						}
					});
				}
			}
		}
</script>

<style>
	.title{height: 103rpx;text-align: center;line-height: 103rpx;font-size: 34rpx;font-weight: bold;}
	.title image{width: 45rpx;height: 24rpx;vertical-align: middle;}
	.banner{width: 100%;height: 279rpx;}
	.banner image{width: 100%;height: 100%;}
	page{background: #f9f9f9;}
	.juan-item{width: 686rpx;margin:0px auto 43rpx;}
	.juaninfo{width: 484rpx;height: 205rpx;}
	.juanbtn{width: 201rpx;height: 205rpx;}
	.juaninfo .beijing{width: 484rpx;height: 205rpx;}
	.juanbtn .beijing{width: 201rpx;height: 205rpx;}
	.beijing{position: absolute;top: 0px;left: 0px;z-index: 0;}
	.zi{width: 72rpx;height: 81rpx;display: block;margin: 62rpx auto;}
	.juan-text{text-align: center;margin-top: 15rpx;}
	
	.juan-text text:nth-of-type(1){font-size:24rpx;font-weight: bold;color: #38D180;}
	.juan-text text:nth-of-type(2){font-size:60rpx;font-weight: bold;color: #38D180;margin-right: 10rpx;}
	.juan-text text:nth-of-type(3){font-size:28rpx;color: #333333;}
	.juan-time{font-size: 28rpx;color: #999;text-align: center;margin-top: 15rpx;}
</style>
